<template>
  <div class="home-container">
    <!-- 顶部 -->
    <div class="search-container">
      <van-search
        class="search"
        v-model="value"
        shape="round"
        background="#4fc08d"
        placeholder="请输入搜索关键词"
        @click="$router.push('/search')"
      />
    </div>

    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          class="my-swipe-item"
          v-for="(swImg, index) in swiperImg"
          :key="index"
        >
          <img :src="swImg.pic" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 推荐音乐列表-->

    <music-list />
  </div>
</template>

<script>
import { getHomeSwiper } from "@/api/home.js";
import MusicList from "./component/music-list.vue";
export default {
  components: {
    MusicList,
  },
  data() {
    return {
      value: "",
      swiperImg: [],
    };
  },

  created() {
    this.loadSwiper();
  },
  methods: {
    // 获取首页轮播图
    async loadSwiper() {
      const { data } = await getHomeSwiper();
      this.swiperImg = data.banners;
    },

  },
};
</script>

<style lang="less" scoped>
.home-container {
  .search-container {
    .search {
      background-color: rgb(73, 160, 175) !important;
    }
  }

  .swiper {
    .my-swipe {
      .my-swipe-item {
        width: 100%;
        height: 220px;
        img {
          width: 100%;
          height: 220px;
        }
      }
    }
  }
}
</style>